<template>
<div>
    <title-bar :title="'我的银行卡'" />
    <van-cell-group style="margin-top: 50px;">
        <van-cell v-for="card in cardItems" :key="card.cdId" clickable @click="editCard(card)">
            <div class="card_panel" slot="title">
                <img :src="'https://apimg.alipay.com/combo.png?d=cashier&t=' + card.bankId" alt="logo">
                <span>{{card.cardNo | bankCard}}</span>
            </div>
        </van-cell>    
    </van-cell-group>

    <is-empty v-if="cardItems.length === 0">您还没有添加银行卡</is-empty>
	<van-button size="large" type="danger" class="add_btn" @click="addCard">添加银行卡</van-button>
</div>
</template>
<script>
import {LIST_BANKCARD} from '@/api/user';
import isEmpty from "@/vue/components/is-empty/";
import TitleBar from '@/vue/components/title-bar/';
export default {
    data() {
        return {
            cardItems: []
        }
    },

    created() {
        this.$reqGet(LIST_BANKCARD, {
            memberId: this.user.id, 
            limit: 0,
            offset: 0
        }, {hideLoading: true}).then(res => {
            let {rows, total} = res.data.data;
            this.cardItems.push(...rows);
        });
    },

    methods: {
        addCard() {
            this.$util.removeStorage('card', false);
            this.$router.push({name: 'add-card'});
        },
        editCard(card) {
            this.$util.setSessionStorage('card', card);
            this.$router.push({name: 'add-card'});
        }
    },

    components: {
        [isEmpty.name]: isEmpty,
        [TitleBar.name]: TitleBar
    }
}
</script>

<style scoped lang="scss">
.add_btn {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.card_panel {
    display: flex;
    align-items: center;
    text-align: right;
    >span {
        flex: 1;
        font-size: 18px;
    }
}
</style>


